/*
 * @Title: 旅游景区-首页
 * @Created by: ycq 
 */
<template>
	<view >
		<IndexHead :config='pageConfig' :bgImg='bannerBgImage' :rightIcoHandle='toSearch'></IndexHead>
		<view style="width: 100%;height: 270upx;position: relative;">
			<view class="swiper-box">
				<swiper  v-if="foodData.length>1" class="swiper" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000"   @change="menuChange">
					<swiper-item v-for="(pageItem,index) in foodData" :key='index'>
						<view class="swiper-item" >
							<view class="head-menu-area">
								<view class="head-menu-item" v-for="nav in pageItem.data" :key='nav.name' @click="navClick(nav.url)">
									<view class="head-menu-img">
										<image :src='nav.img' mode="aspectFit"></image>
									</view>
									<text>{{nav.name}}</text>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="dot-main">
					<!-- #ifdef APP-PLUS|| MP-WEIXIN -->
					<view :class="['dot-item',current==index?'active':'']" v-if='foodData.length > 1' v-for="(item,index) in foodData" :key="index"></view>
					<!-- #endif -->
					<!-- #ifndef APP-PLUS|| MP-WEIXIN -->
					<view :class="['dot-item',current==index?'active':'']" v-if='foodData.length > 1' v-for="(item,index) in foodData" :key="index"></view>
					<!-- #endif -->
				</view>
			</view>
		</view>
		<view class="typeBar">
			<HomeType :pageId='1' style='padding-top: 24upx;'></HomeType>
		</view>
		<view class="like-list">
			<view class="food-area">
				<view class="food-item" v-for='(item,inedx) in likeData' :key='inedx' @click="openDetail">
					<image :src="item.img" mode="aspectFill"></image>
					<text class="food-name">{{item.name}}({{item.star}})</text>
					<view class="food-fp">
						<text class="food-fen">{{item.fen}} <text class="fen">分</text></text>
						<text class="food-pl">{{item.pl}}评论</text>
					</view>
					<text class="food-tip">{{item.add}}|{{item.tip}}</text>
					<text class="food-far">{{item.far}}km</text>
				</view>
			</view>
		</view>
		<!-- <view style="height: 19vw;"></view> -->
		<FootMenu />
		<top-view></top-view>
	</view>
</template>

<script>
	import HomeType from '@/components/HomeType.vue'
	export default {
		data() {
			return {
				title: 'Hello',
				current:0,
				bannerBgImage:['/static/banner.png','/static/banner.png','/static/banner.png','/static/banner.png'],
				pageConfig:{
					common:{
						hasSearch:false, //显示整版搜索框
						hasTitle:true, //显示页面title
						showHeadBg:false,
						headHeight:350,
						hasMenu:false,
						pageId:'jingqu',
					},
					left:{
						img:'/static/pos-home.png' , //左侧图标
						text:'沈阳市', //左侧文字
					},
					mid:{
						title:'景区' ,//页面title
						hasSearchMid:false, //显示中间搜索框
						showAddIcon:true, //是否显示右侧icon
						rightIco:'/static/fdj-head.png'//右侧图标地址
					},
					
				},
				foodData:[  // 首页-美食
					{data:[
							{name:'名胜古迹',img:'/static/spot/msgj.png',url:''},
							{name:'自然景区',img:'/static/spot/zrfj.png',url:''},
							{name:'宗教寺庙',img:'/static/spot/zj.png',url:''},
							{name:'主题乐园',img:'/static/spot/ztly.png',url:''},
							{name:'体育旅游',img:'/static/spot/ty.png',url:''},
							{name:'工业旅游',img:'/static/spot/gyly.png',url:''},
							{name:'校园旅游',img:'/static/spot/xyly.png',url:''},
							{name:'温泉度假',img:'/static/spot/wqdj.png',url:''},
							{name:'亲子游',img:'/static/spot/qzy.png',url:''},
							{name:'自驾游',img:'/static/spot/zjy.png',url:''}
						]
					},
					{data:[
						{name:'名胜古迹',img:'/static/spot/msgj.png',url:''},
						{name:'自然景区',img:'/static/spot/zrfj.png',url:''},
						{name:'宗教寺庙',img:'/static/spot/zj.png',url:''},
						{name:'主题乐园',img:'/static/spot/ztly.png',url:''},
						{name:'体育旅游',img:'/static/spot/ty.png',url:''},
						{name:'工业旅游',img:'/static/spot/gyly.png',url:''},
						{name:'校园旅游',img:'/static/spot/xyly.png',url:''},
						{name:'温泉度假',img:'/static/spot/wqdj.png',url:''},
						{name:'亲子游',img:'/static/spot/qzy.png',url:''},
						{name:'自驾游',img:'/static/spot/zjy.png',url:''}
						],
					},	
				],
				hotData:[
					{
						firstWord:'沈',
						name:'阳故宫——大政殿',
						des:'全天候适宜 | 游览故宫',
						img:'/static/banner.png',
						tip:'沈阳 | 故宫'
					},
					{
						firstWord:'鞍',
						name:'山玉佛苑是国家首批4A级旅游景区',
						des:'适宜9-10月 | 全称5个景点',
						img:'/static/banner.png',
						tip:'玉佛苑 | 山水'
					}
				],
				likeData:[
					{
						name:'鞍山玉佛苑',
						star:'4A',
						fen:9.6,
						pl:56,
						prize:199,
						far:2.3,
						add:'浑南区',
						tip:'宗教寺庙',
						img:'/static/banner.png'
					},
					{
						name:'冰浴度假区',
						star:'4A',
						fen:8.3,
						pl:23,
						prize:168,
						far:6,
						add:'浑南区',
						tip:'自然风景',
						img:'/static/banner.png'
					},
					{
						name:'关门山国家森林公园',
						star:'4A',
						fen:8.5,
						pl:212,
						prize:199,
						far:4.3,
						add:'浑南区',
						tip:'自然风景',
						img:'/static/banner.png'
					},
					{
						name:'桓仁五女山风景区 ',
						star:'4A',
						fen:9.2,
						pl:88,
						prize:199,
						far:3.2,
						add:'浑南区',
						tip:'自然景区',
						img:'/static/banner.png'
					},
					{
						name:'鞍山玉佛苑',
						star:'4A',
						fen:9.6,
						pl:56,
						prize:199,
						far:2.3,
						add:'浑南区',
						tip:'宗教寺庙',
						img:'/static/banner.png'
					},
					{
						name:'冰浴度假区',
						star:'4A',
						fen:8.3,
						pl:23,
						prize:168,
						far:6,
						add:'浑南区',
						tip:'自然风景',
						img:'/static/banner.png'
					},
					{
						name:'关门山国家森林公园',
						star:'4A',
						fen:8.5,
						pl:212,
						prize:199,
						far:4.3,
						add:'浑南区',
						tip:'自然风景',
						img:'/static/banner.png'
					},
					{
						name:'桓仁五女山风景区 ',
						star:'4A',
						fen:9.2,
						pl:88,
						prize:199,
						far:3.2,
						add:'浑南区',
						tip:'自然景区',
						img:'/static/banner.png'
					},
				],
			}
		},
		components:{
			HomeType
		},
		onLoad() {
	
		},
		
		methods: {
			toSearch(){
				uni.navigateTo({
					url:'/pages/home/shearchView'
				})
			},
			openDetail(){
				uni.navigateTo({
					url:'spotDetail'
				})
			},
			menuChange(e) {
				this.current = e.detail.current;
			},
		}
	}
</script>

<style scoped>
	
	.typeBar{
		position: sticky;
		top: calc(80upx + var(--status-bar-height));
		width: 100%;
		height: auto;
		z-index: 20;
		box-shadow: 0 -1px #fff;
		/* border-top: rgba(246,246,246,1.00) solid 15upx ; */
		/* padding-top: 24upx; */
	}
	
	/* 景区 */
	.place-item{
		width: 700upx;
		margin-left: auto;
		margin-right: auto;
		height: 350upx;
		background: #3f4c5a;
		border-radius: 5px;
		margin-top: 5vw;
		position: relative;
	}
	.place-name{
		float: left;
		color: white;
		font-size: 4.5vw;
		left: 4.2%;
		position: absolute;
		padding-top: 3.86vw;
	}
	.place-name-m{
		float: left;
		color: white;
		font-size: 3.5vw;
		left: 4.2%;
		position: absolute;
		padding-top: 2vw;
	}
	.place-name-m font{
		font-size: 4vw;
	}
	.place-des{
		float: right;
		font-size: 3.5vw;
		right: 2.5%;
		color: white;
		position: absolute;
		padding-top: 4.53vw;
	}
	.place-tip{
		width: auto;
		position: absolute;
		bottom: 2vw;
		height: auto;
		left:2%;
		display: flex;
		flex-direction:row;
		margin-right: 2%;
		padding-right: 20px;
		border-radius: 15px 8px 15px 0;
		background: rgba(0,0,0,0.6);
	}
	.place-tip span{
		padding: 1vw 0px 1vw 10px;
		color: #FFFFFF;
		display:table;
		float: right;
		width: auto;
		line-height: 5vw;
		font-size: 3vw;
	}
	.place-tip ul{
		float: right;
		padding: 0;
		display: flex;
		flex-direction: row;
		list-style:none;
	}
	.place-tip ul li{
		width: 4vw;
		height: 5vw;
		margin-top: 0.2vw;
		background:url(../../../static/dengji.png) no-repeat center;
		background-size: 80%;
	}
	.dot{
		width: 1.08vw;
		min-width: 8px;
		height: 1.08vw;
		min-height: 8px;
		float: left;
		display: block;
		margin: auto 0px auto 14px;
		background: #FFFFFF;
		border-radius: 50%;
	}
	.place-img{
		width: 100%;
		border-radius: 5px;
		height: 100%;
		position: absolute;
		left:0
	}
	.hot-list{
		width: 100%;
		height: auto;
		padding-bottom: 28upx;
	}
	.list-title{
		width: 93.4%;
		margin-left: auto;
		margin-right: auto;
		height: 8vw;
		margin-top: 20upx;
	}
	.list-title text{
		font-size: 32upx;
		font-weight: bolder;
	}
	.shu{
		width: 0.7%;
		height: 3.06vw;
		background: #55A0FF;
		float: left;
		margin-top: 2.3vw;
		margin-right: 10px;
	}
	.des{
		font-size: 2.5vw;
		top: 3.5vw;
	}
	.place-tj{
		float: right;
		font-size: 3vw;
		right: 5%;
		text-align: center;
		height: 72upx;
		color: white;
		border-radius: 0 0 50% 50%;
		width: 80upx;
		position: absolute;
		line-height: 7vw;
		background: #55A0FF;
	}
	.more{
		float: right;
		font-size: 30upx;
		padding-top: 10upx;
		color: #888888;
	}
	.like-list{
		width: 100%;
		background:rgba(246,246,246,1.00) ;
		height: auto;
		display: table;
		position: relative;
		padding-bottom: 110upx;
	}
	.list-area{
		width: 100%;
		height: auto;
		display: table;
		/* position: absolute; */
	}
	.list-bg{
		width: 100%;
		height: 300upx;
		position: absolute;
		background: -webkit-linear-gradient(top,#FFFFFF ,rgba(246,246,246,1.00));
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(bottom,#FFFFFF ,rgba(246,246,246,1.00));
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(bottom, #FFFFFF ,rgba(246,246,246,1.00)) ;
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to bottom, #FFFFFF ,rgba(246,246,246,1.00)) ;
		/* 标准的语法 */
		z-index: 0;
	}
	.like-area{
		width: 93.4%;
		margin-left: auto;
		margin-right: auto;
		display: table;
	}
	.like-item:nth-child(odd){
		margin-top: 20upx;
		width: 340upx;
		float: left;
	}
	.like-item:nth-child(even){
		margin-top: 20upx;
		width: 340upx;
		float: right;
	}
	
	.like-item:nth-child(1),.like-item:last-child{
		height: 652upx;
	}
	.like-item:nth-child(1) image,.like-item:last-child image{
		border-radius: 10px 10px 0 0;
		width: 340upx;
		height: 430upx; 
	}
	.like-item{
		height: 700upx;
		background: #FFFFFF;
	}
	.like-item image{
		border-radius: 10px 10px 0 0;
		width: 340upx;
		height: 479upx;
	}
	.like-name{
		width: 293upx;
		margin-left: auto;
		margin-right: auto;
		font-size: 27upx;
		font-weight: bold;
		display: block;
	}
	.like-name font{
		font-weight: 100;
	}
	.like-tip{
		width: 293upx;
		margin-left: auto;
		margin-right: auto;
		color: #048CFF;
		font-size: 25upx;
		display: block;
	}
	.like-des{
		width: 293upx;
		font-size: 27upx;
		margin-left: auto;
		margin-right: auto;
		color: #999999;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.like-prize{
		width: 293upx;
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-top: 10upx;
		text-align: right;
		font-size: 30upx;
		color:#DD540A;
	}
	.swiper-box{
		width: 700upx;
		height: 270upx;
		left: 25upx;
		right: 25upx;
		border-radius: 20upx;
		margin-top: -40upx;
		position: absolute;
		background: #FFFFFF;
		box-shadow: 0px 0px 20px 0px rgba(220,220,220,1);
	}
	.swiper{
		height: 100%;
	}
	.swiper-item{
		width: 100%;
		height: 100%;
	}
	.head-menu-area{
		width: 700upx;
		height: 98upx;
		display: flex;
		flex-direction:row;
		flex-wrap: wrap;
		/* justify-content: space-between; */
	}
	.head-menu-item{
		width: 140upx;
		height: 80upx;
		/* padding: 15upx 0; */
		margin-top: 30upx;
		text-align: center;
	}
	.head-menu-img{
		width: 100%;
		height: 50upx;
	}
	.head-menu-item image{
		width: 44upx;
		height: 42upx;
	}
	.head-menu-item text{
		display: block;
		width: 100%;
		text-align: center;
		font-size: 24upx;
	}
	.dot-main {
		width: 100%;
		height: 38upx;
		display: flex;
		top: 230upx;
		position: absolute;
		z-index: 20;
		justify-content: center;
		align-items: center;
	}
	.dot-item {
		width: 30upx;
		height: 8upx;
		border-radius: 30upx;
		background: rgba(0,0,0,0.2);
		margin: 0 0upx;
		box-sizing: border-box;
	}
	.active {
		background: #55A0FF;
	}
	.food-area{
		width: 700upx;
		margin-left: 25upx;
		margin-right: 25upx;
		height: auto;
		display: table;
		/* position: absolute; */
	}
	.food-item:nth-child(odd){
		margin-top: 20upx;
		width: 340upx;
		float: left;
	}
	.food-item:nth-child(even){
		margin-top: 20upx;
		width: 340upx;
		float: right;
	}
	
	.food-item:nth-child(1),.food-item:last-child{
		height: 413upx;
	}
	.food-item:nth-child(1) image,.food-item:last-child image{
		border-radius: 10px 10px 0 0;
		width: 340upx;
		height: 270upx; 
	}
	.food-item{
		height: 479upx;
		background: #FFFFFF;
		border-radius: 20upx;
	}
	.food-item image{
		border-radius: 10px 10px 0 0;
		width: 340upx;
		height:336upx;
		
	}
	.food-name{
		width: 293upx;
		margin-left: auto;
		margin-right: auto;
		font-size: 27upx;
		font-weight: bold;
		display: block;
	}
	
	.food-tip{
		width: 200upx;
		margin-left: 24upx;
		height: 40upx;
		/* margin-top: 20upx; */
		color: #999999;
		float: left;
		font-size: 26upx;
		display: block;
	}
	.food-pl{
		width: 143upx;
		font-size: 25upx;;
		color: #999999;
		height: 50upx;
		line-height: 54upx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		
		overflow: hidden;
		float: left;
	}
	.food-fen{
		width: 90upx;
		display: block;
		height: 50upx;
		line-height: 50upx;
		text-align: left;
		float: left;
		font-size: 30upx;
		color:#DD540A;
	}
	.food-fp{
		width: 293upx;
		margin-left: auto;
		margin-right: auto;
		height: 50upx;
	}
	.food-fen .fen{
		font-size: 25upx;
	}
	.food-far{
		width: 90upx;
		margin-left: 24upx;
		height: 40upx;
		/* margin-top: 20upx; */
		color: #999999;
		float: right;
		font-size: 26upx;
		display: block;
	}
</style>
